<template>
  <div class="gl_heightFull">
    <div v-if="orderDetail" v-loading="loading">
      <div class="gl_contentBox">
        <el-row type="flex" justify="space-between">
          <el-col class="text" :span="6"><span class="text_color">订单编号：</span>{{ orderDetail.orderNo }}</el-col>
          <el-col class="text" align="right" :span="4">总金额：<span class="money_color">￥{{ formatMoney(orderDetail.totalPrice) }}</span></el-col>
        </el-row>
        <el-row>
          <el-col class="text" :span="6">
            <span class="text_color">订单类型：</span>
            <span v-if="orderDetail.orderTypeCode">
              <template v-for="ktem in dict.orderType">
                {{ ktem.code === orderDetail.orderTypeCode ? ktem.value : '' }}
              </template>
            </span>
          </el-col>
          <el-col class="text" :span="6"><span class="text_color">备注：</span>{{ orderDetail.customerRemark ? orderDetail.customerRemark : '- -' }}</el-col>
        </el-row>
        <el-row>
          <el-col class="text" :span="6">
            <span class="text_color">付款时间：</span>
            <span v-if="orderDetail.payDateTime == '0001-01-01T00:00:00'">- -</span>
            <span v-else>{{ orderDetail.payDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
          </el-col>
          <el-col class="text" :span="6"><span class="text_color">下单时间：</span>{{ orderDetail.orderDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</el-col>
        </el-row>
        <el-row>
          <el-col class="text" :span="6">
            <span class="text_color">支付渠道：</span>
            <span v-if="orderDetail.isOnlinePayment">线上</span>
            <span v-else>线下</span>
          </el-col>
          <el-col class="text" :span="6">
            <span class="text_color">支付方式：</span>
            <span v-if="orderDetail.channelTypeCode">
              <template v-for="ktem in dict.channelType">
                {{ ktem.code === orderDetail.channelTypeCode ? ktem.value : '' }}
              </template>
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="text" :span="6">
            <span class="text_color">下单人：</span>
            <span>{{ orderDetail.creatorMobile ? orderDetail.creatorMobile : '- -' }}</span>
          </el-col>
        </el-row>
      </div>
      <div v-if="orderDetail.orderTypeCode == 'LogisticsOrder'" class="gl_contentBox gl_mt_15">
        <LogisticsOrder :detail="detail" />
      </div>
      <div v-else class="gl_noData">
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import LogisticsOrder from '@/components/Order/logisticsOrder';
import {
  api_GET_TradeOrderDetails // 获取订单详情
} from '@/extend/api/swaggerApi/app.js';
import {
  Api_GET_TradeOrderDetailsQO
} from '@/lib/form/swaggerForm';
export default {
  name: 'LogisticDetail',
  components: {
    LogisticsOrder
  },
  data() {
    return {
      loading: false,
      Api_GET_TradeOrderDetailsQO: new Api_GET_TradeOrderDetailsQO(),
      orderDetail: {},
      detail: {}
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
    this.getDetail();
  },
  methods: {
    // 获取字典
    ...mapActions({ getDict: 'dict/getDict' }),
    getDetail() {
      var that = this;
      that.loading = true;
      that.Api_GET_TradeOrderDetailsQO.OrderNo = this.$route.query.orderNo;
      api_GET_TradeOrderDetails(that.Api_GET_TradeOrderDetailsQO).then(res => {
        that.orderDetail = res;
        if (res.details) {
          that.detail = JSON.parse(res.details);
        }
        that.loading = false;
      }).catch(error => {
        that.$message({ type: 'error', message: error.error && error.error.message || '获取订单详情失败' });
        that.loading = false;
      });
    },
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    }
  }
};
</script>

<style scoped>
.title {
  font-size: 16px;
  color: #353434;
  font-weight: bold;
  line-height: 20px;
}
.text {
  font-size: 14px;
  color: #353434;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 12px;
}
.text_color {
  color: #939393;
}
.money_color {
  color: #f56c6c;
  font-size: 16px;
  font-weight: 600;
}
.el-table,.el-table /deep/ .el-table__body-wrapper {
  min-height: auto;
}
.summary_item.summary_total {
  font-weight: bold;
}
.summary_item {
  font-size: 14px;
  color: #353434;
  line-height: 24px;
}
</style>
